<!--
 * @Author: zhangweinan
 * @Date: 2023-01-13 16:10:08
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-03-27 10:10:42
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\dashboard\PanelGroupNew.vue
-->
<template>
  <div class="panel-group">
    <div class="panel-item">
      <span>我的待办</span>
      <span>{{ unDoCount }}</span>
      <span>
        <svg-icon icon-class="todo" class-name="card-panel-icon" />
      </span>
    </div>
    <div class="panel-item">
      <span>已超时</span>
      <span>{{ timeOutCount }}</span>
      <span>
        <svg-icon icon-class="time-out" class-name="card-panel-icon" />
      </span>
    </div>
    <div class="panel-item">
      <span>办结率</span>
      <span>{{ endRate }}%</span>
      <span>
        <svg-icon icon-class="completion-rate" class-name="card-panel-icon" />
      </span>
    </div>
  </div>
</template>

<script>
import { getMyTask } from "@/api/bpm/processStatistics";
export default {
  components: {},
  data() {
    return {
      unDoCount: 0,
      timeOutCount: 0,
      endRate: 0,
    };
  },
  created() {
    getMyTask().then((res) => {
      let { unDoCount, timeOutCount, endRate } = res.data;
      this.unDoCount = unDoCount;
      this.timeOutCount = timeOutCount;
      this.endRate = endRate;
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    },
  },
};
</script>

<style lang="scss" scoped>
.panel-group {
  display: flex;
  height: 300px;
  box-sizing: border-box;
  .panel-item {
    height: 100%;
    width: 100%;
    margin: 0 14px;
    flex: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 20px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #666666;
      &:nth-child(1) {
        margin-top: 28px;
        margin-bottom: 20px;
      }
      &:nth-child(2) {
        font-size: 48px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #333333;
        flex: 1;
      }
      &:nth-child(3) {
        font-size: 50px;
        margin-bottom: 0;
      }
    }
  }
}
.card-panel-icon {
  font-size: 100px;
}
</style>
